<template>
  <div class="page home" @click="onRest">
    <custom title="我的会员卡" />
    <div class="vipTop">
      <div class="vipImg">
        <div class="flex justify-sb">
          <div class="flex">
            <img src="@/assets/registerMember/shopIcon.png" alt="" class="shopImg" />
            <div class="exceedOne vipTit">{{ mermberInfo.merchantName }}</div>
          </div>
          <div class="jFBox">
            <img src="@/assets/registerMember/collection.png" alt="" class="jFImg" />
            <div>积分: {{ mermberInfo.score }}</div>
          </div>
        </div>
        <div class="rich">
          <div>卡余额: </div>
          <div class="richPrice">¥{{ mermberInfo.balance }}</div>
        </div>
        <div class="cardNum">卡号：{{ mermberInfo.cardNo }}</div>
      </div>
    </div>
    <div class="orderList flex justify-sb align-center">
      <!-- <div class="orderBox">
        <img src="@/assets/myMember/codeOne.png" alt="" class="orderBoxImg" />
        <div>付款码</div>
      </div>
      <div class="orderBoxline"></div> -->
      <div class="orderBox" @click="onGoPage('recharge')">
        <img src="@/assets/myMember/codeTwo.png" alt="" class="orderBoxImg" />
        <div>会员充值</div>
      </div>
    </div>
    <div class="list">
      <van-cell is-link @click="onGoPage('usercardbill')">
        <template #title>
          <div class="flex align-center">
            <img src="@/assets/myMember/one.png" alt="" class="listIcon" />
            <div class="listTit">会员账单</div>
          </div>
        </template>
      </van-cell>
      <van-cell is-link @click="onGoPage('mycoupon')">
        <template #title>
          <div class="flex align-center">
            <img src="@/assets/myMember/two.png" alt="" class="listIcon" />
            <div class="listTit">我的优惠券</div>
          </div>
        </template>
      </van-cell>
      <van-cell is-link @click="onGoPage('myintegral')">
        <template #title>
          <div class="flex align-center">
            <img src="@/assets/myMember/three.png" alt="" class="listIcon" />
            <div class="listTit">我的积分</div>
          </div>
        </template>
      </van-cell>
      <van-cell is-link @click="onGoPage('https://www.baidu.com/')">
        <template #title>
          <div class="flex align-center">
            <img src="@/assets/myMember/four.png" alt="" class="listIcon" />
            <div class="listTit">权益商城</div>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
import { commonAjax } from 'Ajax'
export default {
  components: {
    custom
  },
  data() {
    return {
      mermberInfo: {}
    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    onGoPage(url) {
      this.isHttp(url) ? this.$toast('跳转权益商城') : this.$jump('/' + url)
    },
    isHttp: function(URL) {
      const Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
      return new RegExp(Expression).test(URL)
    },
    init() {
      commonAjax.getMemberDetail().then(res => {
        console.log(res, 1111111111111111)
        this.mermberInfo = res
      })
    }
  }
}
</script>

<style scoped>
.vipTop{
  width: 100%;
  height: 366px;
  padding-top: 48px;
  background: #1C1C1C;
}
.vipImg{
  width: 660px;
  height: 360px;
  margin: 0 auto;
  background: url('../../assets/registerMember/vipBg.png') no-repeat;
  background-size: 100% 100%;
}
.shopImg{
  width: 84px;
  height: 84px;
  display: block;
  margin: 46px 20px 0 48px;
}
.vipTit{
  font-size: 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  color: #704B0D;
  margin-top: 65px;
}
.jFBox{
  min-width: 226px;
  height: 62px;
  background: linear-gradient(90deg, #303030 23%, #4D4C4C 96%);
  border-radius: 31px 0px 0px 31px;
  display: flex;
  align-items: center;
  margin-top: 57px;
  font-size: 26px;
  font-weight: 500;
  color: #FAE1BB;
  margin-right: 10px;
}
.jFImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-left: 18px;
  margin-right: 13px;
}
.rich{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 50px;
  font-size: 28px;
}
.richPrice{
  font-size: 40px;
  color: #000000;
  margin-left: 10px;
}
.cardNum{
  line-height: 1rem;
  margin-left: 48px;
  font-size: 24px;
  color: #A08269;
}
.orderList{
  width: 590px;
  height: 86px;
  padding: 47px 50px;
  background: #FFFFFF;
  box-shadow: 0px 6px 13px 1px #E7EBEE;
  border-radius: 12px;
  margin: -60px auto 0;
}
.orderBox{
  width: 250px;
  height: 86px;
  background: #F7F7F7;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.orderBoxImg{
  width: 38px;
  height: 38px;
  display: block;
  font-weight: 500;
  color: #000000;
  margin-right: 18px;
}
.orderBoxline{
  width: 3px;
  height: 40px;
  background: #F2F2F2;
}
.list{
  padding: 47px 30px 0;
}
.listIcon{
  width: 70px;
  height: 70px;
  display: block;
}
.listTit{
  font-size: 30px;
  font-weight: 400;
  color: #181818;
  margin-left: 30px;
}
</style>
